
<template>
  <div :id="id" :data="data" :firsttype="firsttype" :secondtype="secondtype" style="width:100%;min-height:500px;">
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
    name:'bar',
    props:{
      id:String,
      firsttype:String,
      secondtype:String,
      data:{
        type:Array,
        default:[]
      }
    },
    mounted(){
      this.$nextTick(()=>{
        let bar =echarts.init(document.getElementById(this.id));
        let xdata=this.data.map(item=>{
          return item.date
        });
        const option={
            tooltip : {
                trigger: 'axis'
            },
            legend:{
              right:'10%',
              data:this.secondtype!=''?[this.firsttype,this.secondtype]:[this.firsttype]
            },
            color:this.secondtype!=''?['#FFD85C','#37A2DA']:['#37A2DA'],
            xAxis : [
                {
                    type : 'category',
                    data : xdata
                }
            ],
            yAxis : [
                {
                    type : 'value'
                }
            ],
            series:this.secondtype!=''?[
              {
                name:this.firsttype,
                type:'bar',
                stack:'总量',
                data:this.data.map(item=>{
                  return item.value1
                })
              },
              {
                 name:this.secondtype,
                type:'bar',
                stack:'总量',
                data:this.data.map(item=>{
                  return item.value2
                })
              }
            ]:[{
                name:this.firsttype,
                type:'bar',
                stack:'总量',
                data:this.data.map(item=>{
                  return item.value1
                })
              }]
        };
        bar.setOption(option);
        window.addEventListener('resize', function () {
            bar.resize();
        });
      })
    }

}

</script>
<style lang='scss' >
</style>